<template>
  <div class="charts">
    <el-row>
      <el-col :span=24>
        <el-slider
            @change="handleSliderChange"
            v-model="value"
            :min="min"
            :max="max"
            range
            :step=86400
            :format-tooltip="formatTooltip"
            :marks="marks">
        </el-slider>
      </el-col>
    </el-row>
    <el-row :gutter=5>
      <el-col :span=12>
        <CategoryProportion
            title="支出分类占比"
            :start="subValue[0]"
            :end="subValue[1]"
            @func="handleExpenditureCategoryProportion"
            :data-source="expenditureCategoryProportionData"
        ></CategoryProportion>
      </el-col>
      <el-col :span=12>
        <CategoryProportion
            title="收入分类占比"
            :start="subValue[0]"
            :end="subValue[1]"
            @func="handleIncomeCategoryProportion"
            :data-source="incomeCategoryProportionData"
        ></CategoryProportion>
      </el-col>
    </el-row>
    <el-row>
      <el-col style="height: 500px">
        <ExpenditureBar
            :data-source="expenditureBarData"
            @func="handleExpenditureBar"
            :start="subValue[0]"
            :end="subValue[1]"
        ></ExpenditureBar>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CategoryProportion from "./charts/CategoryProportion";
import getTime from "./api/getTime";
import timeUtil from '@/util/TimeUtil'
import getExpenditureCategoryProportion from "./api/getExpenditureCategoryProportion";
import getIncomeCategoryProportion from "./api/getIncomeCategoryProportion";
import ExpenditureBar from "@/views/container/views/chart/charts/ExpenditureBar";
import getExpenditureBar from "@/views/container/views/chart/api/getExpenditureBar";

export default {
  name: "BillChart",
  components: {
    ExpenditureBar,
    CategoryProportion
  },
  data() {
    return {
      min: null,
      max: null,
      value: [],
      subValue: [],
      marks: null,
      expenditureCategoryProportionData: null,
      incomeCategoryProportionData: null,
      expenditureBarData: null,
    }
  },
  methods: {
    async getBillTime() {
      let res = await getTime();
      if (!res.success) {
        this.$message.error('获取时间失败')
        return;
      }
      this.min = res.data.minTime;
      this.max = res.data.maxTime;
      //预览最近6个月的账单 => 6*30*24*60*60=15552000
      let left = res.data.maxTime - 15552000 < res.data.minTime ? res.data.minTime : res.data.maxTime - 15552000;
      this.value = [left, res.data.maxTime]
      this.subValue = this.value;
      this.marks = {};

      this.marks[res.data.minTime] = {
        style: {
          width: "150px"
        },
        label: this.$createElement('strong', timeUtil.timestampFormat(res.data.minTime, 'day'))
      };
      this.marks[res.data.maxTime - 10] = {
        style: {
          width: "150px"
        },
        label: this.$createElement('strong', timeUtil.timestampFormat(res.data.maxTime, 'day'))
      };
    },
    formatTooltip(value) {
      return timeUtil.timestampFormat(value, 'day');
    },
    handleSliderLeft() {
      console.log('left');
    },
    handleSliderChange(value) {
      this.subValue = value;
    },
    async handleExpenditureCategoryProportion() {
      if (this.expenditureCategoryProportionData) {
        return this.expenditureCategoryProportionData;
      }
      let res = await getExpenditureCategoryProportion(this.min, this.max);
      if (res.success) {
        this.expenditureCategoryProportionData = res.data;
      }
    },
    async handleIncomeCategoryProportion() {
      if (this.incomeCategoryProportionData) {
        return this.incomeCategoryProportionData;
      }
      let res = await getIncomeCategoryProportion(this.min, this.max);
      if (res.success) {
        this.incomeCategoryProportionData = res.data;
      }
    },
    async handleExpenditureBar() {
      if (this.expenditureBarData) {
        return this.expenditureBarData;
      }
      let res = await getExpenditureBar(this.min, this.max);
      if (res.success) {
        this.expenditureBarData = res.data;
      }
    }
  },
  created() {
    this.getBillTime();
  }
}
</script>

<style scoped lang="less">

.charts {
  height: 100%;
  width: 100%;
}

.el-row {
  margin-bottom: 30px;

  .el-col {
    .category-proportion {
      height: 500px;
    }

    .el-slider {
      width: 80%;
      padding: 10px 100px;
    }

    .category-proportion:hover, .expenditure-bar:hover {
      box-shadow: 0 0 2px #599ba7;
      border-radius: 40px;
    }
  }
}

</style>
